<template>
  <div class="tags">
    <div class="tags-list" v-if="active">
      <el-tabs v-model="active"
               editable
               type="card">
        <el-tab-pane :key="index"
                     v-for="(item, index) in navList"
                     :label="item.title"
                     :name="item.path">
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="tags-more">
      <el-dropdown class="tags-menu">
        <el-button type="primary" size="mini">
          更多<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="handleSearch">收索</el-dropdown-item>
          <el-dropdown-item @click.native="handleCloseOthersTags">关闭其他</el-dropdown-item>
          <el-dropdown-item @click.native="handleCloseAllTags">关闭所有</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapFields } from 'vuex-map-fields'

export default {
  name: 'tagsNav',
  computed: {
    ...mapFields('profile/tags', {
      navList: 'retrieved'
    }),
    active () {
      let url = '/home'
      if (this.navList && this.navList.length > 1) {
        this.navList.map((item) => {
          if (item.path === this.$route.path) {
            url = item.path
          }
        })
      }
      return url
    }
  },
  data () {
    return {}
  },
  methods: {
    handleSearch () {
    },
    handleCloseOthersTags () {
    },
    handleCloseAllTags () {
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../styles/mixin";

  .tags {
    @include fj;
    align-items: center;
    .tags-list{
      padding: 5px 0;
      @include wh(calc(100% - 95px), 100%);

      ::v-deep .el-tabs{
        .el-tabs__nav, .el-tabs__header{
          border: none !important;
        }
        .el-tabs__header{
          margin: 0;
        }
        .el-tabs__new-tab{
          display: none;
        }
        .el-tabs__item{
          color: #666;
          border: none;
          line-height: 30px;
          height: 30px;

          &:hover{
            opacity: 0.8;
          }
          &.is-active{
            background: #409EFF;
            color: #fff;
            border-radius: 4px;
          }
        }
      }

    }
  }
</style>
